<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>腕带结算</title>
		<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
	<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
		<script type="text/jscript" th:src="@{/plugin/jquery.min.js}"></script>
		<script>
		
		//营业时间
		
			function showTime() {
			 var	nowtime = new Date();
			 var	year = nowtime.getFullYear();
			 var	month = nowtime.getMonth() + 1;
			 var	date = nowtime.getDate();
				$("#mytime").html(year + "年" + month + "月" + date +"日");
				$("#mytime2").html("营业时间：" +nowtime.toLocaleTimeString());
			};
			
		$(function(){
			
			setInterval("showTime()", 1000);
			
			
		})
		
		
		<!--翻页  -->
		function paging(args){
			//alert(args);
			var wriststrp_id=$("#idnum").val();
			var pageNum=$("#text").val();
			var total=$("#totalpage").val();
		
			//改变后的页面
			var page=parseInt(pageNum)+args;
			
			if(page<1||page>total){
				return;	
			}
			//刷新页面
			getpagebean(wriststrp_id,page);
			
		}	
		<!-- 读取pagebean的方法 -->
		function getpagebean(wriststrp_id,pageNum){
			
			//加载该对象的资金变动情况
			$.post("[[@{/balanceChange}]]",
					{
				"wriststrp_id": wriststrp_id,
				"pageNum": pageNum
					},
					function(pageBean){
						if(pageBean.beanList==null){
							alert("未能查询到数据");
							return;
						}
						//获取内容集合
						var data=pageBean.beanList;
						
						if(data!=""){
				
							//拼标签显示消费项
							var content="";
							//支付类型
							var type="";
							
					$.each(data,function(index,obj){
						if(obj.charge_type==1){
							type="现金充值";
						};
						if(obj.charge_type==2){
							type="支付宝充值";
						};
						if(obj.charge_type==3){
							type="腕带押金"; 
						};
						if(obj.charge_type==4){
							type="商品消费 "; 
						};
						content +=		
						'<tr ><td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">'
						+((index+1)+(pageNum-1)*10)
						+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
						+ (obj.amount>0 ? (("+")+obj.amount) : obj.amount)
						+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
						+ type
						+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
						+"水公园" 
						+'</td><td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">'
						+obj.create_time
						+'</td></tr>'	;
							});	
					
					//显示到表格
					$("#content").html(content);
					
					//分页菜单
					
					var pagecontent=
						'<a href="javaScript:paging(-1)" >上一页</a> '
					+' 第 <span>'
					+pageBean.pageIndex+'/'+pageBean.totalPage+'</span>页 '
					+' <a href="javaScript:paging(1)" >下一页</a>';
					//翻页菜单
					$("#pagemenu").html(pagecontent);
					
					//当前页码
					$("#text").val(pageBean.pageIndex);
					
					$("#totalpage").val(pageBean.totalPage);
							return;
						}
						alert("当前腕带信息未找到，请联系管理员 ");
					}
			);
			return;
			
		}
		
		
		<!--读取腕带信息-->
		$(function(){
			
			$("#read").mousedown(function(){
				$("#read").css("font-size","15px");
				
			});
			$("#read").mouseup(function(){
				$("#read").css("font-size","20px");
				var va=$("#idnum").val();
				
				
				//发送ajax请求从仓库中获取腕带类型
				$.post( "[[@{/gettype}]]",
						{wriststrap_id : va},
						function(data){
							if(data.state==0){	
								$("#op").text('闲置状态') ; return;
							}
							if(data.state==1){	
								$("#op").text('使用状态');
								
								
								//1.合计账号消费信息和结算费用
						$.post("[[@{/allBalanceChange}]]",
								{
								wriststrp_id: $("#idnum").val()
								},
								function(data){
							
							if(data==""){
								alert("该腕带消费信息获取失败！");return;
							};
							//获取数据成功
							
							//消费合计
							var amount=0;
							//充值合计
							var charge=0;
												
							//现金充值总额
							var cash=0;
												
							//支付宝充值总额
							var alipay=0;
								
							
							//商家消费总额
							var expense=0;
							
							$.each(data,function(index,obj){
								//消费合计
								if(obj.amount<0){
									amount+= obj.amount ;
								};
								
								//充值合计
								if(obj.amount>0){
								charge+= obj.amount;
								};
								
								//现金充值总额
								if(obj.payment==1){
									cash+=obj.amount;
								}
								
								//支付宝充值总额
								if(obj.payment==2){
									alipay+=obj.amount;
								}
								
								
							});
							//应退金额：充值-消费+押金
							var total=charge+amount+10;
							
							$("#charge").html("+"+charge);
							$("#spend").html(amount);
							$("#total").html(total);
							
							//现金充值显示到明细 
							
								$("#cash").html(cash);
							
							//支付宝充值 显示到明细
								$("#alipay").html(alipay);
							
							});
						//加载分页信息；
						getpagebean(va,$("#text").val());
								
								return;
							}
							if(data.state==2){	
								$("#op").text('挂失状态');return;
							}
							alert("腕带信息不存在！");return;
						});	
			});
		})
		
		
		
			<!--重置金额 -->
		function reset(){
			var amount=$("#amount").val("");
		}
		<!--退格-->
		function backspace(){
			var amount=$("#amount").val();
			if(amount!=""){
			var temp=amount.length;
			temp=amount.substring(0,temp-1);
			var amount=$("#amount").val(temp);
			}
			
		}
		
		<!-- 输入确定金额 -->
		function clickNumber(num){
			var amount=$("#amount").val();
			if(amount==""){
				$("#amount").val(num);
			}else{
				num=parseInt(num)+parseInt(amount);
				$("#amount").val(num+"");
			}
		}
		<!-- 输入键盘-->
		function clickNumber1(num){
			var amount=$("#amount").val();
			if(amount==""){
				$("#amount").val(num);
			}else{
				num=parseInt(num)+parseInt(amount)*10;
				$("#amount").val(num);
			}
		}
		<!-- 模拟按键功能，点击div变小-->
		$(function(){
			$("#commit").mousedown(function(){
				$("#commit").css("font-size","20px");
			});
			$("#commit").mouseup(function(){
				$("#commit").css("font-size","25px");
				
				//如果没有读取腕带数据不能进行结算；
				if($("#op").text()!="使用状态"){
					alert("未读取结算腕带信息");return;
				}
				
				//后台结算
				$.post(
						"[[@{/dowindup}]]",
						{
							wriststrp_id:	$("#idnum").val(),
								total	:	$("#total").text()
						},
						function(data){
							if(data!=""){
								alert(data);
								location.reload();
								return;
							}
							
							alert("结算失败");
						}
						
				)
			});
			
			$("#exit").mousedown(function(){
				$("#exit").css("font-size","20px");
			});
			$("#exit").mouseup(function(){
				$("#exit").css("font-size","25px");
			});
			
			
		})
			
		</script>
	</head>
	<body>
	<input  type="hidden" id="text">
	<input  type="hidden" id="totalpage">
		<!--最外层容器控制位置-->
		<div id="" class="container" style="height:500px; margin: 30px 100px;">
			<div id="" class="layui-row ">

				<!--  左边操作功能模块-->
				<div id="" class="layui-col-md12 layui-bg-gray" style="height: 500px;">
					<div id="" class="layui-row ">
						<!-- 左侧菜单框-->
						<div id="" class="layui-col-md8 " style=" height: 500px;">
							<!-- 印刷号 -->
							<div id="" class="layui-col-md12" style="border:#40AFFE 2px solid ; background-color: white; height: 70px;">
								
							<div id="" class="layui-col-md5"
								style="height: 70px; text-align: center; line-height: 70px; font-size: 20px; color: red;">
								印&nbsp;刷&nbsp;号：<input id="idnum" type="text" size="10"
									; style="color: red;" />
							</div>

							<div id="read" class="layui-col-md2 layui-bg-blue"
								style="height: 70px; text-align: center; line-height: 70px; font-size: 20px;">
								读取腕带</div>

							<div id="" class="layui-col-md5"
								style="height: 70px; text-align: center; line-height: 70px; font-size: 20px;">
								腕带状态： <select id="type">
									<option id="op">读取腕带</option>
								</select>
							</div>
							</div>
							<!-- 消费项目列表 -->
							<div id="" class="layui-col-md12" style="margin-top: 5px; background-color: #93D1FF;font-size: 20px; height: 30px;">
								&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-list" style="font-size: 20px;"></i>消费项目列表
							</div>
							<div id="" class="layui-col-md12">
								<table border="1px" bordercolor="#f2f2f2" width="100%" >
									<tr bgcolor="#007DDB">
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">消费编号</td>
										<td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">金额</td>
										<td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">交易类型</td>
										<td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">商户名称</td>
										<td class="layui-col-md3" style="height: 30px; text-align: center; line-height: 30px;">时间</td>
									</tr>
									
								<tbody id="content" >
								
								</tbody>
								
								</table>
							</div>
							
							<!-- 翻页 -->
							<div id="pagemenu" class="layui-col-md12"  style=" position:absolute; text-align:center; font-size:20px;  bottom:20px; ">
							</div>
						</div>

						<!-- 右侧菜单-->
						<div id="" class="layui-col-md4" style="height: 500px; ">
							<div id="" class="layui-col-md12" style="color: white; background-color: #93D1FF; height: 150px; text-align: center;margin: 5px;">
								<div id="" class="layui-col-md6" style="text-align: right; font-size: 20px; margin-top: 20px;">
									充值合计：
								</div>
								<div id="charge" class="layui-col-md2" style="text-align: right; font-size: 20px; margin-top: 20px;">
									
								</div>
								<div id="" class="layui-col-md2" style="text-align: center; font-size: 20px; margin-top: 20px;">
									(元)
								</div>
								<div id="" class="layui-col-md6" style="text-align: right; font-size: 20px;margin-top: 20px;">
									消费合计：
								</div>
								<div id="spend" class="layui-col-md2" style="text-align: right;font-size: 20px; margin-top: 20px;">
									
								</div>
								<div id="" class="layui-col-md2" style="text-align: center; font-size: 20px; margin-top: 20px;">
									(元)
								</div>
								<div id="" class="layui-col-md6" style="text-align: right; font-size: 20px;margin-top: 20px;">
									押金合计：
								</div>
								<div id="" class="layui-col-md2" style="text-align: right;font-size: 20px; margin-top: 20px;">
									10
								</div>
								<div id="" class="layui-col-md2" style="text-align: center; font-size: 20px; margin-top: 20px;">
									(元)
								</div>
							</div>
							<div id="" class="layui-col-md12" style="color: white; background-color: red; height: 60px; text-align: center;margin: 5px;">
								<div id="" class="layui-col-md6" style="text-align: right; font-size: 25px; margin-top: 15px;">
									应退金额：
								</div>
								<div id="total" class="layui-col-md2" style="text-align: right; font-size: 25px; margin-top: 15px;">
									
								</div>
								<div id="" class="layui-col-md2" style="text-align: right; font-size: 25px; margin-top: 15px;">
									(元)
								</div>
							</div>
							<div id="" class="layui-col-md12 layui-col-space5" style="margin: 5px;">
								<div id="" class="layui-col-md12">
									<div id="" style="border: #01AAED 1px solid;  color: #01AAED; line-height: 50px; height: 50px;">
										<div style=" font-size: 25px;  margin: auto;">
											<i class="layui-icon layui-icon-rmb" style="font-size: 25px;"></i>充值明细
										</div>
									</div>
									<div id="" style="border: #01AAED 1px solid;  color: #01AAED;  height: 200px;">
										<div id="" style="height: 150px;">
											
										
										<div id="" class="layui-col-md6" style="text-align: right; font-size: 20px;margin-top: 20px;">
											现&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金：
										</div>
										<div id="cash" class="layui-col-md2" style="text-align: right;font-size: 20px; margin-top: 20px;">
											
										</div>
										<div id="" class="layui-col-md2" style="text-align: center; font-size: 20px; margin-top: 20px;">
											(元)
										</div>
										
										<div id="" class="layui-col-md6" style="text-align: right; font-size: 20px;margin-top: 20px;">
											支&nbsp;付&nbsp;宝：
										</div>
										<div id="alipay" class="layui-col-md2" style="text-align: right;font-size: 20px; margin-top: 20px;">
											
										</div>
										<div id="" class="layui-col-md2" style="text-align: center; font-size: 20px; margin-top: 20px;">
											(元)
										</div>
										</div>
										<div id="" class="layui-col-md6">
											<div id="" style=" text-align: center;line-height: 50px; height: 50px;">
												<div id="commit" onmousedown="dosome(16)" onmouseup="dother(16)" style="background-color: #0000FF;font-size: 25px;color :white; width: 100%; height: 100%; margin: auto;">
													 <i class="layui-icon layui-icon-release" style="font-size: 20px;"></i>结算
												</div>
											</div>
										</div>
										<div id="" class="layui-col-md6">
											<div id="" style=" text-align: center;line-height: 50px; height: 50px;font-size: 25px;">
												<div id="exit" onmousedown="dosome(17)" onmouseup="dother(17)" style="background-color: #FF0000; width: 100%;color :white;  height: 100%; margin: auto;">
													<i class="layui-icon layui-icon-close" style="font-size: 25px;"></i>关闭
												</div>
											</div>
										</div>
									</div>
								</div>



								</table>
							</div>
						</div>


					</div>
				</div> 
				<!-- 页脚-->
				<div class="layui-row layui-bg-gray" style="text-align: center;">
					<div id="mytime" class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> </div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 操作用户：yanhui</div>
					<div id="mytime2"  class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"></div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 某某游乐园</div>
				</div>
			</div>

		</div>

	</body>
</html>
